<template>
<!-- 订单详情页面 -->
    <view>
        <view class="bg_image">
            <view v-if="orderData.payType">
                <view class="appointment">
                    已支付
                    <text style="font-size: 26rpx; margin-left: 20rpx">
                        {{
                            type == 2 ? '用药咨询' : type == 4 ? '购药订单' : ''
                        }}
                    </text>
                </view>
                <view class="prompt_font">您的订单已支付</view>
            </view>
            <!-- <view v-else> <view  class="appointment">未支付</view>
                <view class="prompt_font">您的订单未支付</view></view> -->
            <view v-else>
                <view class="appointment">已预约</view>
                <view class="prompt_font">您的订单已预约</view>
            </view>
        </view>
        <view class="card_content card_one">
            <view style="display: flex; justify-content: space-between" v-if="orderData.deliveryType !=2">
                <view>
                    <view class="peopinfoContent">
                        <view class="peopinfo">
                            <text>{{ orderData.name }}</text>
                            <text class="phone">{{ orderData.phone }}</text>
                        </view>
                    </view>
                    <view class="addressinfo">
                        <text>
                            <!-- {{
                                orderData.addressProvince
                                    ? orderData.addressProvince
                                    : ''
                            }}{{
                                orderData.addressCity
                                    ? orderData.addressCity
                                    : ''
                            }}-->{{
                                orderData.addressDistrict
                                    ? orderData.addressDistrict
                                    : ''
                            }}{{ orderData.address ? orderData.address : '' }}
                        </text>
                    </view>
                </view>
                <!--                <view style="padding-top: 15rpx;">-->
                <!--                    <image style="width: 40rpx;height: 30rpx;" src="../../../pagesSub/static/images/icon_right_black.png"></image>-->
                <!--                </view>-->
            </view>

            <view class="personal_info pa_top personalfont">
                <text class="peopinfo">就诊人信息</text>
                <view style="display: flex">
                    <text style="font-size: 31rpx">
                        {{ orderData.patientName ? orderData.patientName : '' }}
                        <text style="padding: 0 5rpx">|</text>
                        {{ orderData.sex == 1 ? '男' : orderData.sex == 2 ? '女' : '' }}
                        <text style="padding: 0 5rpx">|</text>
                        {{ orderData.age ? orderData.age : '' }}岁
                    </text>
                </view>
            </view>
             <!-- 防疫信息 -->
            <!-- <view v-if="orderData.preventionFlag == 2" class="gray_font" >
                <view style="
                        padding: 15rpx 0;
                        border-top: 1px solid #fbf5f5;
                        margin-top:20rpx;
                    ">
                        <text class="" style="width: 200rpx"> 当前体温（℃） </text>
                        <text style="float:right">{{ orderData.preventionInfo.temperature }}</text>
                </view>
                <view
                   
                    style="
                        font-size:30rpx;
                        padding: 15rpx 0;
                        border-bottom: 1px solid #fbf5f5;
                        border-top: 1px solid #fbf5f5;
                    "
                >
                    <view class="display6">
                        <text class="specification">
                            14天内去过境外、中高风险地区
                        </text>
                        <span>{{ orderData.preventionInfo.foreginFlag == 1 ? '是' : '否' }}</span>
                    </view>
                    <view class="display6">
                        <text class="specification">
                            14天内冷链等高危从业人员接触史
                        </text>
                        <span>{{ orderData.preventionInfo.coolFlag == 1 ? '是' : '否' }}</span>
                    </view>
                    <view class="display6">
                        <text class="specification">
                            14天内境外人员接触史
                        </text>
                        <span>{{ orderData.preventionInfo.foreginTouch == 1 ? '是' : '否' }}</span>
                    </view>
                </view>
                <view style="padding: 15rpx 0 0">
                    <view style="display: flex">
                        <view class="titles">
                            <span style="margin-top: 8rpx;">症状</span>
                            <view class="wapper" style="margin:12rpx 0 0 10rpx;">
                                <view class="tag-view" :key="index">
                                    <span class="tag tagNoCheck">{{
                                        orderData.preventionInfo.symptom
                                    }}</span>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view style="margin-top:5rpx">{{ orderData.preventionInfo.otherStr }}</view>
                </view>
            </view> -->
        </view>

        <view
            class="card_content card_one"
            style="margin-top: 30rpx"
            v-if="orderData"
        >
            <view class="peopinfoContent" v-if="orderData.type == 1">
                <view style="float: left">
                    <image
                        style="width: 80rpx; height: 80rpx; border-radius: 50%"
                        :src="orderData.avatar"
                    ></image>
                </view>
                <view class="peopinfo" style="padding-left: 95rpx">
                    <text>{{
                        orderData.doctorName ? orderData.doctorName : ''
                    }}</text>
                    <text style="padding-left: 15rpx">
                        {{ orderData.hosName ? orderData.hosName : '' }}
                    </text>
                </view>
                <view class="addressinfo peopinfo" style="padding-left: 95rpx">
                    <text style="font-size: 28rpx">
                        {{ orderData.jobTitle ? orderData.jobTitle : '' }} |
                        {{ orderData.deptName ? orderData.deptName : '' }}
                    </text>
                </view>
            </view>
            <!--药房-->
            <view class="peopinfoContent" v-else>
                <view style="float: left">
                    <image
                        style="width: 80rpx; height: 80rpx; border-radius: 50%"
                        :src="orderData.storeLogo"
                    ></image>
                </view>
                <view class="peopinfo" style="padding-left: 95rpx">
                    <text>{{
                        orderData.doctorName ? orderData.doctorName : ''
                    }}</text>
                    <text style="padding-left: 15rpx">
                        {{ orderData.storeName ? orderData.storeName : '' }}
                    </text>
                </view>
                <view class="addressinfo peopinfo" style="padding-left: 95rpx">
                    <text style="font-size: 28rpx">
                        {{
                            orderData.storeAddress ? orderData.storeAddress : ''
                        }}
                    </text>
                </view>
            </view>
        </view>

        <view class="card_content">
            <view class="peopinfo" style="display: flex">
                <image
                    style="width: 45rpx; height: 45rpx"
                    src="../../../pagesSub/static/images/icon_h_chu@2x.png"
                ></image>
                <view class="peopinfo">{{
                    type == 2 ? '处方信息' : '订单信息'
                }}</view>
            </view>
            <view>
                <view style="margin-top: 30rpx">
                    <text style="font-size: 30rpx">
                        {{ orderData.storeName ? orderData.storeName : '' }}
                    </text>
                </view>
                <view
                    class="medical_content"
                    v-for="(
                        data, index
                    ) in orderData.wxReserveDrugResponseBodies"
                    :key="index"
                >
                    <view class="medical_img">
                        <image :src="data.drugImg"></image>
                    </view>
                    <view class="medical_right">
                        <view class="medical_title">
                            <view>
                                <view class="medicalName">
                                    <view class="durgName">
                                      <image
                                            class="yibaoTips"
                                            v-if="data.medicalItemCode"
                                            src="../../../static/images/chs.png"
                                        />
                                        <!-- <text
                                            class="yibaoTips"
                                            v-if="data.medicalItemCode"
                                            >医保</text
                                        > -->
                                        {{ data.drugName }}</view
                                    >
                                </view>
                                <view class="specification gray_font">
                                    规格：{{
                                        data.drugSpecification
                                            ? data.drugSpecification
                                            : ''
                                    }}
                                </view>
                            </view>
                            <view class="medicalName"
                                >x{{ data.drugCount || 1 }}</view
                            >
                        </view>
                        <view class="medical_price"
                            >￥{{ data.drugPrice || 0 }}</view
                        >
                    </view>
                </view>
            </view>
        </view>
        <view class="card_content">
            <view class="personal_info pa_top_10">
                <text class="bottom-info gray_font">发票信息</text>
                <text
                    v-if="orderData.billType == '' || orderData.isBill == 1"
                    class="medicalName"
                >
                    本次不开具发票
                </text>
                <text v-if="orderData.billType == 1" class="medicalName">
                    普通发票-个人
                </text>
                <text v-if="orderData.billType == 2" class="medicalName">
                    普通发票-公司
                </text>
            </view>
            <view class="specification" v-if="orderData.billType == 1">
                发票抬头：{{ orderData.rise ? orderData.rise : '' }}
            </view>
            <view v-if="orderData.billType == 2" style="font-size: 30rpx">
                <view class="specification">
                    发票抬头：{{ orderData.unitName ? orderData.unitName : '' }}
                </view>
                <view class="specification">
                    纳税人识别号：{{
                        orderData.taxPayerNo ? orderData.taxPayerNo : ''
                    }}
                </view>
            </view>
        </view>
        <view class="card_content">
            <view class="personal_info pa_top_10">
                <text class="bottom-info gray_font">订单号</text>
                <text class="medicalName">
                    {{ orderData.orderNumber ? orderData.orderNumber : '' }}
                </text>
            </view>
            <view class="personal_info pa_top_10">
                <text class="bottom-info gray_font">订单总金额</text>
                <text class="medicalName">
                    ￥{{
                        orderData.totalPrice
                            ? orderData.totalPrice
                            : '0'
                    }}
                </text>
            </view>
            <view class="personal_info pa_top_10">
                <text class="bottom-info gray_font">优惠金额</text>
                <text class="medicalName">
                    ￥{{
                        orderData.couponPrice
                            ? orderData.couponPrice
                            : '0'
                    }}
                </text>
            </view>
           
            <view class="personal_info pa_top_10">
                <text class="bottom-info gray_font">配送费</text>
                <text class="medicalName">
                    ￥{{ orderData.deliveryFee ? orderData.deliveryFee : '0' }}
                </text>
            </view>
            <view class="personal_info pa_top_10">
                <text class="bottom-info gray_font">实付金额</text>
                <text class="medicalName" style="color: #d57667">
                    ￥{{
                        orderData.actualPayment ? orderData.actualPayment : '0'
                    }}
                </text>
            </view>
            <view class="personal_info pa_top_10">
                <text class="bottom-info gray_font">支付方式</text>
                <text class="medicalName">
                    {{ payType[orderData.payType] }}
                </text>
            </view>
            <view class="personal_info pa_top_10">
                <text class="bottom-info gray_font">配送方式</text>
                <text class="medicalName">
                    {{ deliveryType[orderData.deliveryType] || '达达'}}
                </text>
            </view>
        </view>
        <!-- <hover-ball /> -->
        <!-- <view class="customerService">
            <image @click="Service" src="../../../pagesSub/static/images/btn_h_ke@2x.png"></image>
        </view> -->
    </view>
</template>

<script>
import { orderdetail, updatebill } from '@/api/prescribing.js';
import {
    wechatOrderPay,
    // paySuccess
} from '@/api/consult.js';
// import hoverBall from '@/components/hover-ball/hover-ball.vue';
export default {
    components: {
        // hoverBall,
    },
    data() {
        return {
            type: '',
            orderid: '',
            orderData: {}, //订单详情信息
            invoiceContent: false,
            checkstatus: 1,
            orderType: {
                1: '处方信息',
                5: '处方信息',
                0: '商城订单',
            },
            payType: {
                1: '微信支付',
                2: '银行卡支付',
                3: '线下支付',
                4: '医保支付',
            },
             deliveryType: {
                1:'达达',
                2:'到店自提'
            }, //已选物流名称
        };
    },
    onLoad(option) {
        // type ==2 预约购药  type==4 扫码购药  6--开具处方
        if (option.orderId) {
            this.orderid = option.orderId;
            this.type = option.type;
        }
        // this.orderdetails();
    },
    onShow() {
        this.orderdetails();
    },
    methods: {
        invoiceType(type) {
            this.orderData.billType = type;
        },
        //发票修改
        saveinvoice() {
            let _this = this;
            if (_this.orderData.billType == 1) {
                _this.orderData.unitName == '';
                _this.orderData.taxPayerNo == '';
                if (_this.orderData.rise == '') {
                    uni.showToast({
                        title: '请填写发票抬头',
                        icon: 'none',
                        duration: 3000,
                    });
                    return;
                }
            }
            if (_this.orderData.billType == 2) {
                _this.orderData.rise == '';
                if (
                    _this.orderData.unitName == '' ||
                    _this.orderData.taxPayerNo == ''
                ) {
                    uni.showToast({
                        title: '请填写发票信息',
                        icon: 'none',
                        duration: 3000,
                    });
                    return;
                }
            }

            updatebill({
                id: _this.orderid,
                billType: _this.orderData.billType,
                rise: _this.orderData.rise,
                unitName: _this.orderData.unitName,
                taxPayerNo: _this.orderData.taxPayerNo,
            })
                .then((res) => {
                    if (res.code == 200) {
                        uni.showToast({
                            title: '修改成功',
                            duration: 3000,
                        });
                        this.$refs.popup.close();
                        this.orderdetails();
                    }
                })
                .catch((err) => {
                    console.log('错误#', err);
                });
            // console.log("&&&&发票信息",JSON.stringify(_this.orderData))
        },
        // 开具发票按钮
        changeInvoice(e) {
            this.invoiceContent = e.target.value;

            // this.isChecked = e.target.value;
        },
        closeinvoice() {
            this.$refs.popup.close();
            this.orderdetails();
        },
        toggle(type) {
            this.type = type;
            // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
            this.$refs.popup.open(type);
        },
     
        Service() {
            uni.navigateTo({
                url: `/pagesSub-My/my/customerService`,
            });
        },
        orderdetails() {
            let _this = this;
            uni.showLoading({
                title: '加载中',
            });
            orderdetail(_this.orderid)
                .then((res) => {
                    _this.orderData = res.data;
                    // console.log("订单详情",JSON.stringify(_this.orderData))
                    uni.hideLoading();
                })
                .catch((err) => {
                    uni.hideLoading();
                    _this.$util.Tips({
                        title:err,
                        icon:'none',
                        duration:3000,
                    })
                    console.log('错误#', res);
                });
        },
        // getOrderPay: function () {
        //     let _this = this;
        //     let orderNo = _this.orderid;
        //     let goPages;
        //     // console.log("^^^^^^type",this.type)
        //     if (_this.type == 2) {
        //         // 我的问诊
        //         goPages = '/pagesSub-My/my/inquiryList';
        //     } else {
        //         // 现场开方或者开具处方 跳转到我的页面
        //         goPages = '/pages/my/index';
        //     }

        //     uni.showLoading({
        //         title: '加载中',
        //     });
        //     wechatOrderPay({
        //         orderId: orderNo,
        //         spbillCreateIp: '',
        //     })
        //         .then((res) => {
        //             let jsConfig = res.data;
        //             uni.requestPayment({
        //                 timeStamp: jsConfig.timeStamp,
        //                 nonceStr: jsConfig.nonceStr,
        //                 package: jsConfig.package,
        //                 signType: jsConfig.signType,
        //                 paySign: jsConfig.paySign,
        //                 // ticket: _this.productType==='normal'? null : jsConfig.ticket,
        //                 success: function (ress) {
        //                     uni.hideLoading();
        //                     uni.showToast({
        //                         title: '支付成功',
        //                         duration: 3000,
        //                     });
        //                     if (_this.type == 2) {
        //                         uni.redirectTo({
        //                             url: goPages,
        //                         });
        //                     } else {
        //                         uni.switchTab({
        //                             url: goPages,
        //                         });
        //                     }
        //                     // return _this.$util.Tips({
        //                     // 	title: '支付成功',
        //                     // 	icon: 'success'
        //                     // }, {
        //                     // 	tab: 5,
        //                     // 	url: goPages
        //                     // });
        //                     //仅测试调用，正式环境走异步回调
        //                     // uni.showLoading({
        //                     // 	title:'回调中'
        //                     // })
        //                     // paySuccess(_this.orderid).then(res => {
        //                     // 	uni.hideLoading();
        //                     // 	return _this.$util.Tips({
        //                     // 		title: '支付回调成功',
        //                     // 		icon: 'success'
        //                     // 	}, {
        //                     // 		tab: 5,
        //                     // 		url: '/pages/my/inquiryList'
        //                     // 	});
        //                     // }).cache(err => {
        //                     // 	uni.hideLoading();
        //                     // 	return _this.$util.Tips({
        //                     // 		title: err
        //                     // 	});
        //                     // })
        //                 },
        //                 fail: function (e) {
        //                     uni.hideLoading();
        //                     return _this.$util.Tips(
        //                         {
        //                             title: '取消支付',
        //                         },
        //                         {
        //                             tab: 5,
        //                             url: goPages,
        //                         }
        //                     );
        //                 },
        //                 complete: function (e) {
        //                     uni.hideLoading();
        //                     //关闭当前页面跳转至订单状态
        //                     if (e.errMsg == 'requestPayment:cancel')
        //                         return _this.$util.Tips(
        //                             {
        //                                 title: '取消支付',
        //                             },
        //                             {
        //                                 tab: 5,
        //                                 url: goPages,
        //                             }
        //                         );
        //                 },
        //             });
        //         })
        //         .catch((err) => {
        //             uni.hideLoading();
        //             return _this.$util.Tips({
        //                 title: err,
        //             });
        //         });
        // },
    },
};
</script>

<style scoped lang='scss'>
@import '@/static/css/style.css';

.durgName {
    font-size: 30rpx;
    margin-top: 8rpx;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    word-break: break-all;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.bg_image {
    background-image: url(../../../pagesSub/static/images/bg_menzhen@2x.png);
    height: 200rpx;
    background-size: 100% 100%;
    color: #ffffff;
    padding: 30rpx;
}

.pa_top_10 {
    padding-top: 10rpx;
}

.appointment {
    font-weight: 600;
}

.prompt_font {
    font-size: 29rpx;
    margin-top: 5rpx;
}

.card_content {
    background-color: #ffffff;
    padding: 30rpx;
    margin: 30rpx;
    border-radius: 10rpx;
}

.card_one {
    margin-top: -100rpx;
}

.phone {
    margin-left: 30rpx;
}

.addressinfo {
    color: #3f3f3f;
    font-size: 30rpx;
    margin-top: 5rpx;
}

.personal_info {
    display: flex;
    justify-content: space-between;
}

.peopinfo {
    font-size: 32rpx;
}

.medical_content {
    display: flex;
    margin-top: 30rpx;
    border-bottom: 1rpx solid #fbfbfb;
    padding-bottom: 30rpx;
}

.pa_top {
    margin-top: 20rpx;
}

.personalfont {
    font-size: 31rpx;
}

.medical_img {
    width: 200rpx;
    height: 120rpx;
}

.medical_img image {
    width: 100%;
    height: 100%;
}

.medicalName {
    font-size: 30rpx;
}

.specification {
    font-size: 30rpx;
    margin-top: 10rpx;
}

.bottom-info {
    font-size: 30rpx;
}

.medical_right {
    margin-left: 30rpx;
    width: 100%;
}

.medical_title {
    display: flex;
    justify-content: space-between;
}

.medical_price {
    float: right;
    color: #d57667;
    font-weight: 600;
    font-size: 33rpx;
}

.real_payment {
    color: #d57667;
}

.add_medical {
    color: #acd4ce;
    text-align: center;
    font-size: 30rpx;
    margin-top: 40rpx;
}

.btn_appointment {
    margin-top: 40rpx;
    background: -webkit-linear-gradient(#77e2a4, #4ccdbc);
    color: #ffffff;
}

/* 支付按钮 */
.payment_button {
    width: 100%;
    display: flex;
    position: fixed;
    bottom: 0;
    height: 80rpx;
}

.payment_button::after {
    content: '';
    display: block;
    clear: both;
}

.combined {
    font-size: 30rpx;
    text-align: center;
    line-height: 80rpx;
    width: 40%;
    background-color: #ffffff;
}

.combined_money {
    font-weight: bold;
    color: #5cc8b3;
}

.immediate {
    background: -webkit-linear-gradient(#77e2a4, #4ccdbc);
    color: #ffffff;
    line-height: 80rpx;
    font-size: 35rpx;
    width: 60%;
    text-align: center;
}

.customerService {
    width: 100%;
    height: 300rpx;
}

.customerService image {
    width: 120rpx;
    height: 120rpx;
    float: right;
    margin-right: 30rpx;
    margin-bottom: 50rpx;
}

.colse_content::after {
    display: block;
    clear: both;
    content: '';
}

.bth_green {
    border-top-right-radius: 40rpx;
    border-bottom-right-radius: 40rpx;
    border-top-left-radius: 40rpx;
    border-bottom-left-radius: 40rpx;
    border: 1rpx solid #4cccbf;
    background-color: #ffffff;
    color: #4cccbf;
    height: 50rpx;
    line-height: 50rpx;
    font-size: 24rpx;
    padding: 0 25rpx;
}

.invoice {
    display: flex;
    margin: 10rpx 0;
}

.btn_invoice {
    color: #ffffff;
    background-color: #4ccdbc;
    font-size: 30rpx;
    margin-top: 60rpx;
}

/deep/.uni-easyinput__content-input.data-v-abe12412 {
    font-size: 30rpx;
}

.invoiceInput {
    margin-top: 30rpx;
}

.tag {
    color: #ffffff !important;
    background-color: #4cccbf !important;
}

.display6 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6rpx;
}
.titles {
    display: flex;
    margin-bottom: 10rpx;
}
.tagNoCheck {
    padding: 2rpx 16rpx;
    border-radius: 10rpx;
    background: #f0f0f0;
    color: #000;
}
</style>
